<template lang="html">
  <div class="footer">
    <div class="footer-bar">
      <div class="pull-right">
          <span>城市:&nbsp;</span>
          <a href="#" class="btn btn-weak footer-citybtn">北京</a>
      </div>
      <a href="#" class="btn btn-weak">登录</a>
      <a href="#" class="btn btn-weak">注册</a>
    </div>
    <div class="footer-nav">
      <ul>
        <li><a href="#" class="react">首页</a></li>
        <li><a href="#" class="react">我的</a></li>
        <li><a href="#" class="react">美团下载</a></li>
        <li><a href="#" class="react">电脑版</a></li>
        <li><a href="#" class="react">帮助</a></li>
      </ul>
    </div>
    <div class="footer-links">
      友情链接：
      <a>猫眼电影</a>
      <a>大众点评</a>
      <a>美团旅行</a>
      <a>榛果民宿</a>
      <a>大众点评下载</a>
      <a>美团点评餐饮学院</a>
    </div>
    <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网<a href="#" target="_blank">京ICP证070791号</a></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeFooter'
}
</script>

<style lang="stylus" scoped>
  .footer
    padding: .3rem .2rem .4rem;
    background-color: #f0efed;
    .footer-bar
      font-size: .28rem;
      margin-bottom: .4rem;
      .pull-right
        float: right!important;
      .btn
        display: inline-block;
        margin: 0;
        text-align: center;
        height: .6rem;
        padding: 0 .32rem;
        border-radius: .06rem;
        color: #fff;
        border: 0;
        background-color: #06c1ae;
        font-size: .28rem;
        vertical-align: middle;
        line-height: .6rem;
        box-sizing: border-box;
        cursor: pointer;
      .btn-weak
        border: .02rem solid #06c1ae;
        padding: 0 .3rem;
        background: 0;
        color: #06c1ae;
    .footer-nav
      margin-bottom: .18rem;
      ul
        margin: 0;
        padding: .18rem 0;
        font-size: .24rem;
        white-space: nowrap;
        text-align: center
        li
          padding: 0 .3rem
          display: inline-block
          border-right: .02rem solid #666
          text-align: center
          .react
            color: #06c1ae;
            display: block
          &:last-child
            border: none
    .footer-links
      font-size: .24rem;
      text-align: center
      line-height: .48rem
      padding: 0 .68rem
      margin: .3rem 0
      a
        color: #06c1ae;
        text-decoration: none;
        padding: 0 .24rem
    .footer-copyright
      font-size: .22rem;
      text-align: center;
      position: relative;
      color: #999;
      .hr
        display: block;
        content: "";
        width: 100%;
        position: absolute;
        top: 50%;
        border-top: 1px solid #999;
      .footer-copyright-text
        position: relative
        padding: 0 .3rem
        background-color: #f0efed
        a
          text-decoration: none;
          color: #999;
</style>
